<template>
	<view class="one">
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-input">
				
				<input 
					type="text" 
					placeholder="输入需要搜索的内容" 
					placeholder-style="color: #CCCCCC;"
					v-model="searchText"
					@confirm="handleSearch"
				/>
				<image 
					src="/static/搜索@3x.png" 
					mode="aspectFit" 
					class="search-icon"
					@click="handleSearch"
				></image>
			</view>
		</view>
		
		<!-- 白色内容区域 -->
		<view class="nav">
			<view class="record-list">
				<view class="record-item" v-for="(item, index) in records" :key="index">
					<view class="record-title">{{item.name}}</view>
					<view class="record-info">
						<view class="info-item">
							<text class="info-label">下单用户：</text>
							<text>{{item.username}}</text>
						</view>
						<view class="info-item">
							<text class="info-label">实付金额：</text>
							<text class="amount">¥ {{item.price || '-'}}</text>
						</view>
					</view>
					<view class="record-time">核销时间：{{item.time}}</view>
				</view>
				<!-- 加载状态提示 -->
				<view class="load-more" v-if="records.length > 0">
					<text v-if="loading">加载中...</text>
					<text v-else-if="finished">没有更多了</text>
				</view>
				<!-- 空状态提示 -->
				<view class="empty-tip" v-if="!loading && records.length === 0">
					<text>暂无核销记录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '',
				records: [],
				shop: null,
				// 分页相关数据
				pageNum: 1,
				pageSize: 10,
				total: 0,
				loading: false,  // 是否正在加载
				finished: false  // 是否加载完成
			}
		},
		onLoad() {
			// 获取店铺信息
			this.shop = uni.getStorageSync('shop');
			console.log('当前店铺信息:', this.shop);
			
			// 如果没有登录则跳转到登录页面
			if (!this.shop) {
				uni.reLaunch({
					url: '/pages/login/login'
				});
				return;
			}
			
			// 加载核销记录
			this.loadRecords();
		},
		methods: {
			// 加载核销记录
			loadRecords() {
				if (this.loading || this.finished) return;
				
				this.loading = true;
				uni.showLoading({
					title: '加载中...'
				});
				
				this.$request({
					url: 'shop/record/record/list',
					method: 'GET',
					data: {
						mid: this.shop.id,
						pageNum: this.pageNum,
						pageSize: this.pageSize
					},
					success: (res) => {
						if (res.data && res.data.rows) {
							// 追加数据
							this.records = [...this.records, ...res.data.rows];
							this.total = res.data.total;
							
							// 判断是否加载完成
							if (this.records.length >= this.total) {
								this.finished = true;
							} else {
								this.pageNum++;
							}
						}
					},
					fail: () => {
						uni.showToast({
							title: '加载失败',
							icon: 'none'
						});
					},
					complete: () => {
						uni.hideLoading();
						this.loading = false;
					}
				});
			},
			
			// 搜索记录
			handleSearch() {
				// 重置分页数据
				this.pageNum = 1;
				this.records = [];
				this.finished = false;
				
				if (!this.searchText.trim()) {
					this.loadRecords();
					return;
				}
				
				if (this.loading) return;
				this.loading = true;
				uni.showLoading({
					title: '搜索中...'
				});
				
				this.$request({
					url: 'shop/record/record/list',
					method: 'GET',
					data: {
						mid: this.shop.id,
						searchValue: this.searchText,
						pageNum: this.pageNum,
						pageSize: this.pageSize
					},
					success: (res) => {
						if (res.data && res.data.rows) {
							this.records = [...this.records, ...res.data.rows];
							this.total = res.data.total;
							
							if (this.records.length >= this.total) {
								this.finished = true;
							} else {
								this.pageNum++;
							}
						}
					},
					fail: () => {
						uni.showToast({
							title: '搜索失败',
							icon: 'none'
						});
					},
					complete: () => {
						uni.hideLoading();
						this.loading = false;
					}
				});
			},
			
			// 触底加载更多
			onReachBottom() {
				if (!this.finished) {
					this.loadRecords();
				}
			}
		}
	}
</script>

<style>
page {
	background: #F7F7F7;
}

.one {
	padding-top: 20rpx;
	height: 250rpx;
	background-color: #2D80F9;
}

/* 搜索框样式 */
.search-box {
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: center;  /* 水平居中 */
	align-items: center;      /* 垂直居中 */
}

.search-input {
	background-color: #FFFFFF;
	border-radius: 35rpx;
	width: 580rpx;
	height: 70rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	margin: 0 auto;  /* 确保居中 */
}

.search-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 10rpx;
	cursor: pointer;
}

.search-icon:active {
	opacity: 0.7;
}

.search-input input {
	flex: 1;
	height: 70rpx;
	font-size: 28rpx;
	padding-left: 10rpx;
}

/* 记录列表样式 */
.record-list {
	padding: 20rpx;
}

.record-item {
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
}

.record-title {
	font-size: 32rpx;
	color: #333;
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #F5F5F5;
	margin-bottom: 20rpx;
}

.record-info {
	display: flex;
	flex-direction: column;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 20rpx;
	padding-top: 0;
}

.info-item {
	margin-bottom: 20rpx;
}

.info-item:last-child {
	margin-bottom: 0;
}

.info-label {
	color: #666;
	display: inline-block;
	width: 140rpx;
}

.amount {
	color: #333;
	font-weight: 500;
}

.record-time {
	font-size: 24rpx;
	color: #999;
	padding-top: 0;
}

/* 加载更多提示 */
.load-more {
	text-align: center;
	padding: 20rpx 0;
	color: #999;
	font-size: 24rpx;
}

/* 空状态提示 */
.empty-tip {
	text-align: center;
	padding: 40rpx 0;
	color: #999;
	font-size: 28rpx;
}
</style>
